<script>
import { mapState } from 'vuex'

export default {
  name: 'chauLicenseInfo',
  computed: {
    ...mapState('chauffeurStore', ['licenseDetail'])
  }
}
</script>

<template>
  <div class="chau-license-info">
    <el-row :gutter="30" justify="center">
      <el-col class="yjddrq" :span="6"><span>驾驶证号：</span><label>{{ licenseDetail.licenseNumber }}</label></el-col>
      <el-col class="yjddrq" :span="6"><span>准驾车型：</span><label>{{ licenseDetail.allowableType }}</label></el-col>
      <el-col class="yjddrq" :span="6"><span>初次领证日期：</span><label>{{ licenseDetail.initialCertificateDate }}</label></el-col>
      <el-col class="yjddrq" :span="6"><span>驾驶证有效期限：</span><label>{{ licenseDetail.validPeriod }}</label></el-col>
      <el-col class="yjddrq" :span="6"><span>司机驾龄：</span><label>{{ licenseDetail.driverAge }}</label></el-col>
      <el-col class="yjddrq" :span="6"><span>驾驶证类型：</span><label>{{ licenseDetail.licenseType }}</label></el-col>
      <el-col class="yjddrq" :span="6"><span>从业资格证：</span><label>{{ licenseDetail.qualificationCertificate }}</label></el-col>
      <el-col class="yjddrq" :span="6"><span>入场证信息：</span><label>{{ licenseDetail.passCertificate }}</label></el-col>
    </el-row>
    <el-row :gutter="30" style="margin-top: 20px">
      <el-col class="yjddrq" :span="24">
        <span>驾驶证图片：</span>
        <img :src="licenseDetail.picture.split(',')[0]" alt="">
        <img :src="licenseDetail.picture.split(',')[1]" alt="">
      </el-col>
    </el-row>
  </div>
</template>

<style scoped lang="scss">
.yjddrq {
  float: left;
  color: #20232a;
  font-size: 14px;
  margin-top: 25px;
}

.yjddrq label {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #818693;
}

img {
  width: 250px;
  height: 150px;
  margin: 0 10px;
  border-radius: 10px;
}
</style>
